<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证：validate</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <form name="form01" ng-app="app01" ng-controller="ctrl01"  ng-submit="submitForm(form01.$valid)">

        <p>
            <b>必填项验证：</b><input name="username" ng-model="username" required>
            <span>
                本框未修改：{{form01.username.$pristine}}
            </span>
            <span>
                本框已修改：{{form01.username.$dirty}}
            </span>
            <span>
                本框验证通过：{{form01.username.$valid}}
            </span>
            <span>
                本框验证失败：{{form01.username.$invalid}}
            </span>
            <span>
                验证失败详情：{{form01.username.$error}}
            </span>
            <span style="color:red" ng-show="form01.username.$dirty && form01.username.$invalid">
                <span ng-show="form01.username.$error.required">本框是必填的</span>
            </span>
        </p>
        <p>
            <b>最小长度:</b><input name="name" ng-model="name" ng-minlength="5">
            <span style="color:red" ng-show="form01.name.$dirty && form01.name.$invalid">
                本框长度必须大于5
            </span>
        </p>
        <p>
            <b>最大长度：</b><input name="name1" ng-model="name1" ng-maxlength="5">
            <span style="color:red" ng-show="form01.name1.$dirty && form01.name1.$invalid">
                本框长度必须小于5
            </span>
        </p>
        <p>
            <b>正则匹配：</b><input name="age" ng-model="age" ng-pattern="/[1-9]/"  ng-maxlength="2"/>
            <span style="color:red" ng-show="form01.age.$dirty && form01.age.$invalid">
                本框只能输入小于100的数字
            </span>
        </p>
        <p>
            <b>邮箱验证：</b><input type="email" name="email" ng-model="email" required>
            <span style="color:red;" ng-show="form01.email.$dirty && form01.email.$invalid">
                <span ng-show="form01.email.$error.required">邮箱是必填的</span>
                <span ng-show="form01.email.$error.email">邮箱格式有误</span>
            </span>
        </p>
        <p>
            <b>数字验证：</b><input type="number" name="total" ng-model="total">
            <span style="color:red;" ng-show="form01.total.$dirty && from01.total.$invalid">
                本框只能输入数字
            </span>
        </p>
        <p>
            <b>URL验证：</b><input type="url" name="url" ng-model="url" />
            <span>
                本框验证失败：{{form01.url.$invalid}}
                已修改：{{form01.url.$dirty}}
            </span>
            <span>
                验证失败详情：{{form01.url.$error}}
            </span>
            <span style="color:red;" ng-show="{{form01.url.$invalid}}">
                URL格式不正确
            </span>
        </p>
        <p>
            <b>自定义验证：</b><input price name="price" ng-model="price">
            <input multiple-email name="email2" ng-model="email2" required  placeholder="自定义验证，多个邮箱地址，以“；”或者“;”分割" />
            验证通过：{{custom_form.email2.$valid}}
        </p>
        <p>
            <button type="submit" ng-disabled="form01.username.$dirty&&form01.username.$invalid||form01.email.$invalid&&form01.email.$dirty">确定</button>
        </p>
    </form>
    <script>
        var app01=angular.module("app01",[]);
        app01.controller("ctrl01",function ($scope) {
            $scope.username="misi";
            $scope.submitForm = function(isValid) {
                if (!isValid) {
                    alert('验证失败');
                }
            };
        });
        app01.directive('multipleEmail', [function () {
            return {
                require: "ngModel",
                link: function (scope, element, attr, ngModel) {
                    if (ngModel) {
                        var emailsRegexp = /^([a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;；]?)+$/i;
                    }
                    var customValidator = function (value) {
                        var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
                        ngModel.$setValidity("multipleEmail", validity);
                        return validity ? value : undefined;
                    };
                    ngModel.$formatters.push(customValidator);
                    ngModel.$parsers.push(customValidator);
                }
            };
        }])/*
        app01.directive("price",[function () {
            return {
                require: "ngModel",
                link:function (scope,elem,attr,ngModel) {
                    if (ngModel) {
                        var reg = /^[1-9]\d+(\.\d{2})?$/;
                    }
                    var customValidator = function (value) {
                        var validity = ngModel.$isEmpty(value) || reg.test(value);
                        ngModel.$setValidity("price", validity);
                        return validity ? value : undefined;
                    };
                    ngModel.$formatters.push(customValidator);
                    ngModel.$parsers.push(customValidator);
                }
            }
        }]);*/
    </script>
</body>
</html>